<template>
  <div class="good">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="open"
    />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
export default {
  setup() {
    const show = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: "浙江省",
        value: "330000",
        children: [{ text: "杭州市", value: "330100" }],
      },
      
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join("/");
    };

    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
    };
  },
  methods:{
      open(){
          this.show=true;
          axios.get("/home/proviced").then(res=>{
              console.log(res,'p');
              if(res.data.code===1){
                  this.options=res.data.data;
                  
                  this.options.text=res.data.data.province;
                  this.options.value=res.data.data.provinceid;
                  console.log(this.options);
              }
          })
      }
  }
};
</script>

<style scoped lamg="scss">
</style>